<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="noodp" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
        <title>Theme Documentation - Content - 难知如阴</title><meta name="Description" content="Find out how to create and organize your content quickly and intuitively in LoveIt theme."><meta property="og:title" content="Theme Documentation - Content" />
<meta property="og:description" content="Find out how to create and organize your content quickly and intuitively in LoveIt theme." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://skydominate.gitee.io/en/theme-documentation-content/" /><meta property="og:image" content="https://skydominate.gitee.io/en/theme-documentation-content/featured-image.jpg"/><meta property="article:section" content="posts" />
<meta property="article:published_time" content="2020-03-05T15:58:26+08:00" />
<meta property="article:modified_time" content="2020-03-05T15:58:26+08:00" />

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://skydominate.gitee.io/en/theme-documentation-content/featured-image.jpg"/>
<meta name="twitter:title" content="Theme Documentation - Content"/>
<meta name="twitter:description" content="Find out how to create and organize your content quickly and intuitively in LoveIt theme."/>
<meta name="application-name" content="难知如阴">
<meta name="apple-mobile-web-app-title" content="难知如阴"><meta name="theme-color" content="#ffffff"><meta name="msapplication-TileColor" content="#da532c"><link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><link rel="manifest" href="/site.webmanifest"><link rel="canonical" href="https://skydominate.gitee.io/en/theme-documentation-content/" /><link rel="prev" href="https://skydominate.gitee.io/en/theme-documentation-extended-shortcodes/" /><link rel="next" href="https://skydominate.gitee.io/en/theme-documentation-basics/" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"><link rel="stylesheet" href="/css/style.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css"><script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "Theme Documentation - Content",
        "inLanguage": "en",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https:\/\/skydominate.gitee.io\/en\/theme-documentation-content\/"
        },"image": [{
                            "@type": "ImageObject",
                            "url": "https:\/\/skydominate.gitee.io\/en\/theme-documentation-content\/featured-image.jpg",
                            "width":  2363 ,
                            "height":  1269 
                        }],"genre": "posts","keywords": "content, Markdown","wordcount":  1712 ,
        "url": "https:\/\/skydominate.gitee.io\/en\/theme-documentation-content\/","datePublished": "2020-03-05T15:58:26+08:00","dateModified": "2020-03-05T15:58:26+08:00","license": "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher": {
            "@type": "Organization",
            "name": "Lioyd Shaw","logo": {
                    "@type": "ImageObject",
                    "url": "https:\/\/skydominate.gitee.io\/images\/shadow.jpg",
                    "width":  1024 ,
                    "height":  576 
                }},"author": {
                "@type": "Person",
                "name": "Dillon"
            },"description": "Find out how to create and organize your content quickly and intuitively in LoveIt theme."
    }
    </script></head>
    <body header-desktop="fixed" header-mobile="auto"><script type="text/javascript">(window.localStorage && localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : ('auto' === 'auto' ? window.matchMedia('(prefers-color-scheme: dark)').matches : 'auto' === 'dark')) && document.body.setAttribute('theme', 'dark');</script>

        <div id="mask"></div><div class="wrapper"><header class="desktop" id="header-desktop">
    <div class="header-wrapper">
        <div class="header-title">
            <a href="/en/" title="难知如阴"><span class="header-title-pre"><i class='fas fa-theater-masks fa-fw'></i></span>难知如阴</a>
        </div>
        <div class="menu">
            <div class="menu-inner"><a class="menu-item" href="/en/posts/"> Posts </a><a class="menu-item" href="/en/tags/"> Tags </a><a class="menu-item" href="/en/categories/"> Categories </a><a class="menu-item" href="/en/categories/documentation/"> Docs </a><a class="menu-item" href="/en/about/"> About </a><a class="menu-item" href="https://github.com/dillonzq/LoveIt" title="GitHub" rel="noopener noreffer" target="_blank"><i class='fab fa-github fa-fw'></i>  </a><span class="menu-item delimiter"></span><a href="javascript:void(0);" class="menu-item language" title="Select Language">English<i class="fas fa-chevron-right fa-fw"></i>
                        <select class="language-select" id="language-select-desktop" onchange="location = this.value;"><option value="/theme-documentation-content/">简体中文</option><option value="/en/theme-documentation-content/" selected>English</option></select>
                    </a><span class="menu-item search" id="search-desktop">
                        <input type="text" placeholder="Search titles or contents..." id="search-input-desktop">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-desktop" title="Search">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-desktop" title="Clear">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-desktop">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </span><a href="javascript:void(0);" class="menu-item theme-switch" title="Switch Theme">
                    <i class="fas fa-adjust fa-fw"></i>
                </a>
            </div>
        </div>
    </div>
</header><header class="mobile" id="header-mobile">
    <div class="header-container">
        <div class="header-wrapper">
            <div class="header-title">
                <a href="/en/" title="难知如阴"><span class="header-title-pre"><i class='fas fa-theater-masks fa-fw'></i></span>难知如阴</a>
            </div>
            <div class="menu-toggle" id="menu-toggle-mobile">
                <span></span><span></span><span></span>
            </div>
        </div>
        <div class="menu" id="menu-mobile"><div class="search-wrapper">
                    <div class="search mobile" id="search-mobile">
                        <input type="text" placeholder="Search titles or contents..." id="search-input-mobile">
                        <a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-mobile" title="Search">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <a href="javascript:void(0);" class="search-button search-clear" id="search-clear-mobile" title="Clear">
                            <i class="fas fa-times-circle fa-fw"></i>
                        </a>
                        <span class="search-button search-loading" id="search-loading-mobile">
                            <i class="fas fa-spinner fa-fw fa-spin"></i>
                        </span>
                    </div>
                    <a href="javascript:void(0);" class="search-cancel" id="search-cancel-mobile">
                        Cancel
                    </a>
                </div><a class="menu-item" href="/en/posts/" title="">Posts</a><a class="menu-item" href="/en/tags/" title="">Tags</a><a class="menu-item" href="/en/categories/" title="">Categories</a><a class="menu-item" href="/en/categories/documentation/" title="">Docs</a><a class="menu-item" href="/en/about/" title="">About</a><a class="menu-item" href="https://github.com/dillonzq/LoveIt" title="GitHub" rel="noopener noreffer" target="_blank"><i class='fab fa-github fa-fw'></i></a><a href="javascript:void(0);" class="menu-item theme-switch" title="Switch Theme">
                <i class="fas fa-adjust fa-fw"></i>
            </a><a href="javascript:void(0);" class="menu-item" title="Select Language">English<i class="fas fa-chevron-right fa-fw"></i>
                    <select class="language-select" onchange="location = this.value;"><option value="/theme-documentation-content/">简体中文</option><option value="/en/theme-documentation-content/" selected>English</option></select>
                </a></div>
    </div>
</header>
<div class="search-dropdown desktop">
    <div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
    <div id="search-dropdown-mobile"></div>
</div>
<main class="main">
                <div class="container"><div class="toc" id="toc-auto">
            <h2 class="toc-title">Contents</h2>
            <div class="toc-content always-active" id="toc-content-auto"></div>
        </div><article class="page single"><h1 class="single-title animated flipInX">Theme Documentation - Content</h1><div class="post-meta">
            <div class="post-meta-line"><span class="post-author"><a href="https://dillonzq.com" title="Author" target="_blank" rel="noopener noreffer author" class="author"><i class="fas fa-user-circle fa-fw"></i>Dillon</a></span>&nbsp;<span class="post-category">included in <a href="/en/categories/documentation/"><i class="far fa-folder fa-fw"></i>Documentation</a></span></div>
            <div class="post-meta-line"><i class="far fa-calendar-alt fa-fw"></i>&nbsp;<time datetime="2020-03-05">2020-03-05</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;1712 words&nbsp;
                <i class="far fa-clock fa-fw"></i>&nbsp;9 minutes&nbsp;<span id="/en/theme-documentation-content/" class="leancloud_visitors" data-flag-title="Theme Documentation - Content">
                        <i class="far fa-eye fa-fw"></i>&nbsp;<span class=leancloud-visitors-count></span>&nbsp;views
                    </span>&nbsp;</div>
        </div><div class="featured-image"><img
        class="lazyload"
        src="/svg/loading.min.svg"
        data-src="/en/theme-documentation-content/featured-image.jpg"
        data-srcset="/en/theme-documentation-content/featured-image.jpg, /en/theme-documentation-content/featured-image.jpg 1.5x, /en/theme-documentation-content/featured-image.jpg 2x"
        data-sizes="auto"
        alt="/en/theme-documentation-content/featured-image.jpg"
        title="Find out how to create and organize your content quickly and intuitively in LoveIt theme." /></div><div class="details toc" id="toc-static"  kept="">
                <div class="details-summary toc-title">
                    <span>Contents</span>
                    <span><i class="details-icon fas fa-angle-right"></i></span>
                </div>
                <div class="details-content toc-content" id="toc-content-static"><nav id="TableOfContents">
  <ul>
    <li><a href="#contents-organization">1 Contents Organization</a></li>
    <li><a href="#front-matter">2 Front Matter</a></li>
    <li><a href="#3-content-summaries">3 Content Summaries</a>
      <ul>
        <li><a href="#automatic-summary-splitting">Automatic Summary Splitting</a></li>
        <li><a href="#manual-summary-splitting">Manual Summary Splitting</a></li>
        <li><a href="#front-matter-summary">Front Matter Summary</a></li>
        <li><a href="#use-description-as-summary">Use Description as Summary</a></li>
        <li><a href="#priority-order-of-summary-selection">Priority Order of Summary Selection</a></li>
      </ul>
    </li>
    <li><a href="#4-basic-markdown-syntax">4 Basic Markdown Syntax</a></li>
    <li><a href="#extended-markdown-syntax">5 Extended Markdown Syntax</a>
      <ul>
        <li><a href="#emoji-support">Emoji Support</a></li>
        <li><a href="#mathematical-formula">Mathematical Formula</a>
          <ul>
            <li><a href="#block-formula">Block Formula</a></li>
            <li><a href="#inline-formula">Inline Formula</a></li>
            <li><a href="#copy-tex">Copy-tex</a></li>
            <li><a href="#mhchem">mhchem</a></li>
          </ul>
        </li>
        <li><a href="#ruby">Ruby Annotation</a></li>
        <li><a href="#fraction">Fraction</a></li>
        <li><a href="#fontawesome">Font Awesome</a></li>
        <li><a href="#escape-character">Escape character</a></li>
      </ul>
    </li>
  </ul>
</nav></div>
            </div><div class="content" id="content"><p>Find out how to create and organize your content quickly and intuitively in <strong>LoveIt</strong> theme.</p>
<h2 id="contents-organization">1 Contents Organization</h2>
<p>A few suggestions to help you get a good looking site quickly:</p>
<ul>
<li>Keep post pages in the <code>content/posts</code> directory, for example: <code>content/posts/my-first-post.md</code></li>
<li>Keep other pages in the <code>content</code> directory, for example: <code>content/about.md</code></li>
<li>Local resources organization</li>
</ul>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>Local Resource Reference<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><p><a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.10" rel="noopener noreffer" target="_blank"><img
class="lazyload version"
src="/svg/loading.min.svg"
data-src="/svg/version/0.2.10-new.en.min.svg"
data-srcset="/svg/version/0.2.10-new.en.min.svg, /svg/version/0.2.10-new.en.min.svg 1.5x, /svg/version/0.2.10-new.en.min.svg 2x"
data-sizes="auto"
alt="LoveIt NEW | 0.2.10"
title="LoveIt NEW | 0.2.10" /></a></p>
<p>There are three ways to reference local resources such as <strong>images</strong> and <strong>music</strong>:</p>
<ol>
<li>Using <a href="https://gohugo.io/content-management/page-resources/" target="_blank" rel="noopener noreffer">page resources</a> in <a href="https://gohugo.io/content-management/page-bundles/" target="_blank" rel="noopener noreffer">page bundles</a>.
You can reference page resources by the value for <code>Resources.GetMatch</code> or the filepath of the resource relative to the page directory directly.</li>
<li>Store resources in the <strong>assets</strong> directory, which is <code>/assets</code> by default.
The filepath of the resource to reference in the post is relative to the assets directory.</li>
<li>Store resources in the <strong>static</strong> directory, which is <code>/static</code> by default.
The filepath of the resource to reference in the post is relative to the static directory.</li>
</ol>
<p>The <strong>priority</strong> of references is also in the above order.</p>
<p>There are many places in the theme where the above local resource references can be used,
such as <strong>links</strong>, <strong>images</strong>, <code>image</code> shortcode, <code>music</code> shortcode and some params in the <strong>front matter</strong>.</p>
<p>Images in page resources or assets directory <a href="https://gohugo.io/content-management/image-processing/" target="_blank" rel="noopener noreffer">processing</a>
will be supported in the future.
It&rsquo;s really cool! <i class="far fa-grin-squint fa-fw"></i></p>
</div>
        </div>
    </div>
<h2 id="front-matter">2 Front Matter</h2>
<p><strong>Hugo</strong> allows you to add front matter in <code>yaml</code>, <code>toml</code> or <code>json</code> to your content files.</p>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>Note<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><strong>Not all</strong> of the below front matters need to be set in each of your posts.
It is necessary only if the front matters and the <code>page</code> part in your <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a> are inconsistent.</div>
        </div>
    </div>
<p>Here is a front matter example:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="nn">---</span><span class="w">
</span><span class="w"></span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;My First Post&#34;</span><span class="w">
</span><span class="w"></span><span class="nt">subtitle</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w"></span><span class="nt">date</span><span class="p">:</span><span class="w"> </span><span class="ld">2020-03-04T15:58:26</span><span class="m">+08</span><span class="p">:</span><span class="m">00</span><span class="w">
</span><span class="w"></span><span class="nt">lastmod</span><span class="p">:</span><span class="w"> </span><span class="ld">2020-03-04T15:58:26</span><span class="m">+08</span><span class="p">:</span><span class="m">00</span><span class="w">
</span><span class="w"></span><span class="nt">draft</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="nt">author</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w"></span><span class="nt">authorLink</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w"></span><span class="nt">description</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w"></span><span class="nt">license</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w"></span><span class="nt">images</span><span class="p">:</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="nt">tags</span><span class="p">:</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span><span class="w"></span><span class="nt">categories</span><span class="p">:</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span><span class="w"></span><span class="nt">featuredImage</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w"></span><span class="nt">featuredImagePreview</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="nt">hiddenFromHomePage</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="w"></span><span class="nt">hiddenFromSearch</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="w"></span><span class="nt">twemoji</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="w"></span><span class="nt">lightgallery</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="nt">ruby</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="nt">fraction</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="nt">fontawesome</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="nt">linkToMarkdown</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="nt">rssFullText</span><span class="p">:</span><span class="w"> </span><span class="kc">false</span><span class="w">
</span><span class="w">
</span><span class="w"></span><span class="nt">toc</span><span class="p">:</span><span class="w">
</span><span class="w">  </span><span class="nt">enable</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w">  </span><span class="nt">auto</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w"></span><span class="nt">code</span><span class="p">:</span><span class="w">
</span><span class="w">  </span><span class="nt">copy</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w">  </span><span class="c"># ...</span><span class="w">
</span><span class="w"></span><span class="nt">math</span><span class="p">:</span><span class="w">
</span><span class="w">  </span><span class="nt">enable</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w">  </span><span class="c"># ...</span><span class="w">
</span><span class="w"></span><span class="nt">mapbox</span><span class="p">:</span><span class="w">
</span><span class="w">  </span><span class="nt">accessToken</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span><span class="w">  </span><span class="c"># ...</span><span class="w">
</span><span class="w"></span><span class="nt">share</span><span class="p">:</span><span class="w">
</span><span class="w">  </span><span class="nt">enable</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w">  </span><span class="c"># ...</span><span class="w">
</span><span class="w"></span><span class="nt">comment</span><span class="p">:</span><span class="w">
</span><span class="w">  </span><span class="nt">enable</span><span class="p">:</span><span class="w"> </span><span class="kc">true</span><span class="w">
</span><span class="w">  </span><span class="c"># ...</span><span class="w">
</span><span class="w"></span><span class="nt">library</span><span class="p">:</span><span class="w">
</span><span class="w">  </span><span class="nt">css</span><span class="p">:</span><span class="w">
</span><span class="w">    </span><span class="c"># someCSS = &#34;some.css&#34;</span><span class="w">
</span><span class="w">    </span><span class="c"># located in &#34;assets/&#34;</span><span class="w">
</span><span class="w">    </span><span class="c"># Or</span><span class="w">
</span><span class="w">    </span><span class="c"># someCSS = &#34;https://cdn.example.com/some.css&#34;</span><span class="w">
</span><span class="w">  </span><span class="nt">js</span><span class="p">:</span><span class="w">
</span><span class="w">    </span><span class="c"># someJS = &#34;some.js&#34;</span><span class="w">
</span><span class="w">    </span><span class="c"># located in &#34;assets/&#34;</span><span class="w">
</span><span class="w">    </span><span class="c"># Or</span><span class="w">
</span><span class="w">    </span><span class="c"># someJS = &#34;https://cdn.example.com/some.js&#34;</span><span class="w">
</span><span class="w"></span><span class="nt">seo</span><span class="p">:</span><span class="w">
</span><span class="w">  </span><span class="nt">images</span><span class="p">:</span><span class="w"> </span><span class="p">[]</span><span class="w">
</span><span class="w">  </span><span class="c"># ...</span><span class="w">
</span><span class="w"></span><span class="nn">---</span><span class="w">
</span></code></pre></td></tr></table>
</div>
</div><ul>
<li>
<p><strong>title</strong>: the title for the content.</p>
</li>
<li>
<p><strong>subtitle</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.en.min.svg"
        data-srcset="/svg/version/0.2.0-new.en.min.svg, /svg/version/0.2.0-new.en.min.svg 1.5x, /svg/version/0.2.0-new.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt NEW | 0.2.0"
        title="LoveIt NEW | 0.2.0" /></a> the subtitle for the content.</p>
</li>
<li>
<p><strong>date</strong>: the datetime assigned to this page, which is usually fetched from the <code>date</code> field in front matter, but this behaviour is configurabl in the <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a>.</p>
</li>
<li>
<p><strong>lastmod</strong>: the datetime at which the content was last modified.</p>
</li>
<li>
<p><strong>draft</strong>: if <code>true</code>, the content will not be rendered unless the <code>--buildDrafts</code>/<code>-D</code> flag is passed to the <code>hugo</code> command.</p>
</li>
<li>
<p><strong>author</strong>: the author for the content.</p>
</li>
<li>
<p><strong>authorLink</strong>: the link of the author.</p>
</li>
<li>
<p><strong>description</strong>: the description for the content.</p>
</li>
<li>
<p><strong>license</strong>: the special lisence for this content.</p>
</li>
<li>
<p><strong>images</strong>: page images for Open Graph and Twitter Cards.</p>
</li>
<li>
<p><strong>tags</strong>: the tags for the content.</p>
</li>
<li>
<p><strong>categories</strong>: the categories for the content.</p>
</li>
<li>
<p><strong>featuredImage</strong>: the featured image for the content.</p>
</li>
<li>
<p><strong>featuredImagePreview</strong>: the featured image for the content preview in the home page.</p>
</li>
<li>
<p><strong>hiddenFromHomePage</strong>: if <code>true</code>, the content will not be shown in the home page.</p>
</li>
<li>
<p><strong>hiddenFromSearch</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.en.min.svg"
        data-srcset="/svg/version/0.2.0-new.en.min.svg, /svg/version/0.2.0-new.en.min.svg 1.5x, /svg/version/0.2.0-new.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt NEW | 0.2.0"
        title="LoveIt NEW | 0.2.0" /></a> if <code>true</code>, the content will not be shown in the search results.</p>
</li>
<li>
<p><strong>twemoji</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.en.min.svg"
        data-srcset="/svg/version/0.2.0-new.en.min.svg, /svg/version/0.2.0-new.en.min.svg 1.5x, /svg/version/0.2.0-new.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt NEW | 0.2.0"
        title="LoveIt NEW | 0.2.0" /></a> if <code>true</code>, the content will enable the twemoji.</p>
</li>
<li>
<p><strong>lightgallery</strong>: if <code>true</code>, images in the content will be shown as the gallery.</p>
</li>
<li>
<p><strong>ruby</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.en.min.svg"
        data-srcset="/svg/version/0.2.0-new.en.min.svg, /svg/version/0.2.0-new.en.min.svg 1.5x, /svg/version/0.2.0-new.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt NEW | 0.2.0"
        title="LoveIt NEW | 0.2.0" /></a> if <code>true</code>, the content will enable the <a href="#ruby" rel="">ruby extended syntax</a>.</p>
</li>
<li>
<p><strong>fraction</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.en.min.svg"
        data-srcset="/svg/version/0.2.0-new.en.min.svg, /svg/version/0.2.0-new.en.min.svg 1.5x, /svg/version/0.2.0-new.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt NEW | 0.2.0"
        title="LoveIt NEW | 0.2.0" /></a> if <code>true</code>, the content will enable the <a href="#fraction" rel="">fraction extended syntax</a>.</p>
</li>
<li>
<p><strong>fontawesome</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.en.min.svg"
        data-srcset="/svg/version/0.2.0-new.en.min.svg, /svg/version/0.2.0-new.en.min.svg 1.5x, /svg/version/0.2.0-new.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt NEW | 0.2.0"
        title="LoveIt NEW | 0.2.0" /></a> if <code>true</code>, the content will enable the <a href="#fontawesome" rel="">Font Awesome extended syntax</a>.</p>
</li>
<li>
<p><strong>linkToMarkdown</strong>: if <code>true</code>, the footer of the content will be shown the link to the orignal Markdown file.</p>
</li>
<li>
<p><strong>rssFullText</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.4" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.4-new.en.min.svg"
        data-srcset="/svg/version/0.2.4-new.en.min.svg, /svg/version/0.2.4-new.en.min.svg 1.5x, /svg/version/0.2.4-new.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt NEW | 0.2.4"
        title="LoveIt NEW | 0.2.4" /></a> if <code>true</code>, the full text content will be shown in RSS.</p>
</li>
<li>
<p><strong>toc</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.9" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.9-changed.en.min.svg"
        data-srcset="/svg/version/0.2.9-changed.en.min.svg, /svg/version/0.2.9-changed.en.min.svg 1.5x, /svg/version/0.2.9-changed.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt CHANGED | 0.2.9"
        title="LoveIt CHANGED | 0.2.9" /></a> the same as the <code>params.page.toc</code> part in the <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a>.</p>
</li>
<li>
<p><strong>code</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.en.min.svg"
        data-srcset="/svg/version/0.2.0-new.en.min.svg, /svg/version/0.2.0-new.en.min.svg 1.5x, /svg/version/0.2.0-new.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt NEW | 0.2.0"
        title="LoveIt NEW | 0.2.0" /></a> the same as the <code>params.page.code</code> part in the <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a>.</p>
</li>
<li>
<p><strong>math</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-changed.en.min.svg"
        data-srcset="/svg/version/0.2.0-changed.en.min.svg, /svg/version/0.2.0-changed.en.min.svg 1.5x, /svg/version/0.2.0-changed.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt CHANGED | 0.2.0"
        title="LoveIt CHANGED | 0.2.0" /></a> the same as the <code>params.page.math</code> part in the <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a>.</p>
</li>
<li>
<p><strong>mapbox</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.en.min.svg"
        data-srcset="/svg/version/0.2.0-new.en.min.svg, /svg/version/0.2.0-new.en.min.svg 1.5x, /svg/version/0.2.0-new.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt NEW | 0.2.0"
        title="LoveIt NEW | 0.2.0" /></a> the same as the <code>params.page.mapbox</code> part in the <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a>.</p>
</li>
<li>
<p><strong>share</strong>: the same as the <code>params.page.share</code> part in the <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a>.</p>
</li>
<li>
<p><strong>comment</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-changed.en.min.svg"
        data-srcset="/svg/version/0.2.0-changed.en.min.svg, /svg/version/0.2.0-changed.en.min.svg 1.5x, /svg/version/0.2.0-changed.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt CHANGED | 0.2.0"
        title="LoveIt CHANGED | 0.2.0" /></a> the same as the <code>params.page.comment</code> part in the <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a>.</p>
</li>
<li>
<p><strong>library</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.7" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.7-new.en.min.svg"
        data-srcset="/svg/version/0.2.7-new.en.min.svg, /svg/version/0.2.7-new.en.min.svg 1.5x, /svg/version/0.2.7-new.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt NEW | 0.2.7"
        title="LoveIt NEW | 0.2.7" /></a> the same as the <code>params.page.library</code> part in the <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a>.</p>
</li>
<li>
<p><strong>seo</strong>: <a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.10" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.10-new.en.min.svg"
        data-srcset="/svg/version/0.2.10-new.en.min.svg, /svg/version/0.2.10-new.en.min.svg 1.5x, /svg/version/0.2.10-new.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt NEW | 0.2.10"
        title="LoveIt NEW | 0.2.10" /></a> the same as the <code>params.page.seo</code> part in the <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a>.</p>
</li>
</ul>
<div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw"></i>Tip<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content"><p><a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.10" rel="noopener noreffer" target="_blank"><img
class="lazyload version"
src="/svg/loading.min.svg"
data-src="/svg/version/0.2.10-new.en.min.svg"
data-srcset="/svg/version/0.2.10-new.en.min.svg, /svg/version/0.2.10-new.en.min.svg 1.5x, /svg/version/0.2.10-new.en.min.svg 2x"
data-sizes="auto"
alt="LoveIt NEW | 0.2.10"
title="LoveIt NEW | 0.2.10" /></a></p>
<p><strong>featuredImage</strong> and <strong>featuredImagePreview</strong> support the complete usage of <a href="#contents-organization" rel="">local resource references</a>.</p>
<p>If the page resource with <code>name: featured-image</code> or <code>name: featured-image-preview</code> is set in the front matter,
it is not necessary to set the parameter <code>featuredImage</code> or <code>featuredImagePreview</code>:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="nt">resources</span><span class="p">:</span><span class="w">
</span><span class="w"></span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">featured-image</span><span class="w">
</span><span class="w">  </span><span class="nt">src</span><span class="p">:</span><span class="w"> </span><span class="l">featured-image.jpg</span><span class="w">
</span><span class="w"></span>- <span class="nt">name</span><span class="p">:</span><span class="w"> </span><span class="l">featured-image-preview</span><span class="w">
</span><span class="w">  </span><span class="nt">src</span><span class="p">:</span><span class="w"> </span><span class="l">featured-image-preview.jpg</span><span class="w">
</span></code></pre></td></tr></table>
</div>
</div></div>
        </div>
    </div>
<h2 id="3-content-summaries">3 Content Summaries</h2>
<p><strong>LoveIt</strong> theme uses the summary of the content to display abstract information in the home page. Hugo can generate summaries of your content.</p>
<p><figure><a class="lightgallery" href="/en/theme-documentation-content/summary.png" title="Summary Preview" data-thumbnail="/en/theme-documentation-content/summary.png" data-sub-html="<h2>Summary Preview</h2><p>Summary Preview</p>">
        <img
            class="lazyload"
            src="/svg/loading.min.svg"
            data-src="summary.png"
            data-srcset="/en/theme-documentation-content/summary.png, summary.png 1.5x, /en/theme-documentation-content/summary.png 2x"
            data-sizes="auto"
            alt="/en/theme-documentation-content/summary.png" />
    </a><figcaption class="image-caption">Summary Preview</figcaption>
    </figure></p>
<h3 id="automatic-summary-splitting">Automatic Summary Splitting</h3>
<p>By default, Hugo automatically takes the first 70 words of your content as its summary.</p>
<p>You may customize the summary length by setting <code>summaryLength</code> in the <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a>.</p>
<p>If you are creating content in a <strong><ruby>CJK<rt>Chinese/Japanese/Korean</rt></ruby></strong> language and want to use Hugo’s automatic summary splitting, set <code>hasCJKLanguage</code> to <code>true</code> in your <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a>.</p>
<h3 id="manual-summary-splitting">Manual Summary Splitting</h3>
<p>Alternatively, you may add the <code>&lt;!--more--&gt;</code> summary divider where you want to split the article.</p>
<p>Content that comes before the summary divider will be used as that content’s summary.</p>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>Note<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">Be careful to enter <code>&lt;!--more--&gt;</code> exactly; i.e., all lowercase and with no whitespace.</div>
        </div>
    </div>
<h3 id="front-matter-summary">Front Matter Summary</h3>
<p>You might want your summary to be something other than the text that starts the article. In this case you can provide a separate summary in the <code>summary</code> variable of the article front matter.</p>
<h3 id="use-description-as-summary">Use Description as Summary</h3>
<p>You might want your description in the <code>description</code> variable of the article front matter as the summary.</p>
<p>You may add the <code>&lt;!--more--&gt;</code> summary divider at the start of the article. Keep content that comes before the summary divider empty. Then <strong>LoveIt</strong> theme will use your description as the summary.</p>
<h3 id="priority-order-of-summary-selection">Priority Order of Summary Selection</h3>
<p>Because there are multiple ways in which a summary can be specified it is useful to understand the order. It is as follows:</p>
<ol>
<li>If there is a <code>&lt;!--more--&gt;</code> summary divider present in the article but no content is before the divider, the description will be used as the summary.</li>
<li>If there is a <code>&lt;!--more--&gt;</code> summary divider present in the article the text up to the divider will be provided as per the manual summary split method.</li>
<li>If there is a summary variable in the article front matter the value of the variable will be provided as per the front matter summary method.</li>
<li>The text at the start of the article will be provided as per the automatic summary split method.</li>
</ol>
<div class="details admonition note open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-pencil-alt fa-fw"></i>Note<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">It is not recommended to include rich text block elements in the summary, which will cause typographic errors. Such as code blocks, pictures, tables, etc.</div>
        </div>
    </div>
<h2 id="4-basic-markdown-syntax">4 Basic Markdown Syntax</h2>
<p>This part is shown in the <a href="../basic-markdown-syntax/" rel="">basic markdown syntax page</a>.</p>
<h2 id="extended-markdown-syntax">5 Extended Markdown Syntax</h2>
<p><strong>LoveIt</strong> theme has some extended syntax elements for you to write articles.</p>
<h3 id="emoji-support">Emoji Support</h3>
<p>This part is shown in the <a href="../emoji-support/" rel="">emoji support page</a>.</p>
<h3 id="mathematical-formula">Mathematical Formula</h3>
<p><strong>LoveIt</strong> theme supports mathematical formulas based on <a href="https://katex.org/" target="_blank" rel="noopener noreffer">$ \KaTeX $</a>.</p>
<p>Set the property <code>enable = true</code> under <code>[params.math]</code> in your <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a>
and the property <code>math: true</code> of the article front matter to enable the automatic rendering of mathematical formulas.</p>
<div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw"></i>Tip<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">Here is a list of <a href="https://katex.org/docs/supported.html" target="_blank" rel="noopener noreffer">$ \TeX $ functions supported by $ \KaTeX $</a>.</div>
        </div>
    </div>
<h4 id="block-formula">Block Formula</h4>
<p>The default block delimiters are <code>$$</code>/<code>$$</code> and <code>\\[</code>/<code>\\]</code>:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown">$$ c = \pm\sqrt{a^2 + b^2} $$

\\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\]
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p>$$ c = \pm\sqrt{a^2 + b^2} $$</p>
<p>\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \]</p>
<h4 id="inline-formula">Inline Formula</h4>
<p>The default inline delimiters are <code>$</code>/<code>$</code> and <code>\\(</code>/<code>\\)</code>:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown">$ c = \pm\sqrt{a^2 + b^2} $ and \\( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \\)
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p>$ c = \pm\sqrt{a^2 + b^2} $ and \( f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \)</p>
<div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw"></i>Tip<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">You can add more block and inline delimiters in your <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a>.</div>
        </div>
    </div>
<h4 id="copy-tex">Copy-tex</h4>
<p><strong><a href="https://github.com/Khan/KaTeX/tree/master/contrib/copy-tex" target="_blank" rel="noopener noreffer">Copy-tex</a></strong> is an extension for <strong>$ \KaTeX $</strong>.</p>
<p>By the extension, when selecting and copying $ \KaTeX $ rendered elements, copies their $ \LaTeX $ source to the clipboard.</p>
<p>Set the property <code>copyTex = true</code> under <code>[params.math]</code> in your <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a> to enable Copy-tex.</p>
<p>Select and copy the formula rendered in the previous section, and you can find that the copied content is the LaTeX source code.</p>
<h4 id="mhchem">mhchem</h4>
<p><strong><a href="https://github.com/Khan/KaTeX/tree/master/contrib/mhchem" target="_blank" rel="noopener noreffer">mhchem</a></strong> is an extension for <strong>$ \KaTeX $</strong>.</p>
<p>By the extension, you can write beautiful chemical equations easily in the article.</p>
<p>Set the property <code>mhchem = true</code> under <code>[params.math]</code> in your <a href="../theme-documentation-basics#site-configuration" rel="">site configuration</a> to enable mhchem.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown">$$ \ce{CO2 + C -&gt; 2 CO} $$

$$ \ce{Hg^2+ -&gt;[I-] HgI2 -&gt;[I-] [Hg^{II}I4]^2-} $$
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p>$$ \ce{CO2 + C -&gt; 2 CO} $$</p>
<p>$$ \ce{Hg^2+ -&gt;[I-] HgI2 -&gt;[I-] [Hg^{II}I4]^2-} $$</p>
<h3 id="ruby">Ruby Annotation</h3>
<p>An extended Markdown syntax for <strong>ruby annotation</strong> is supported in <strong>LoveIt</strong> theme:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown">[Hugo]^(An open-source static site generator)
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p><strong><ruby>Hugo<rt>An open-source static site generator</rt></ruby></strong></p>
<h3 id="fraction">Fraction</h3>
<a href="https://gitee.com/lizilong1993/hugo-blog/releases/tag/v0.2.0" rel="noopener noreffer" target="_blank"><img
        class="lazyload version"
        src="/svg/loading.min.svg"
        data-src="/svg/version/0.2.0-new.en.min.svg"
        data-srcset="/svg/version/0.2.0-new.en.min.svg, /svg/version/0.2.0-new.en.min.svg 1.5x, /svg/version/0.2.0-new.en.min.svg 2x"
        data-sizes="auto"
        alt="LoveIt NEW | 0.2.0"
        title="LoveIt NEW | 0.2.0" /></a>
<p>An extended Markdown syntax for <strong>fraction</strong> is supported in <strong>LoveIt</strong> theme:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown">[Light]/[Dark]

[99]/[100]
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p><sup>Light</sup>/<sub>Dark</sub></p>
<p><sup>90</sup>/<sub>100</sub></p>
<h3 id="fontawesome">Font Awesome</h3>
<p><strong>LoveIt</strong> theme uses <a href="https://fontawesome.com/" target="_blank" rel="noopener noreffer">Font Awesome</a> as the icon library.
You can easily use these icons in your articles.</p>
<p>Get the <code>class</code> of icons you wanted from the <a href="https://fontawesome.com/icons?d=gallery" target="_blank" rel="noopener noreffer">Font Awesome website</a>.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown">Gone camping! :(fas fa-campground fa-fw): Be back soon.

That is so funny! :(far fa-grin-tears):
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p>Gone camping! <i class="fas fa-campground fa-fw"></i>&nbsp;Be back soon.</p>
<p>That is so funny! <i class="far fa-grin-tears"></i></p>
<h3 id="escape-character">Escape character</h3>
<p>In some special cases (when writing this theme documentation <i class="far fa-grin-squint-tears"></i>),
your content will conflict with basic or extended Markdown syntax, and it is inevitable.</p>
<p>The escape character syntax can help you build the content you wanted:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown">{?X} -&gt; X
</code></pre></td></tr></table>
</div>
</div><p>For example, two <code>:</code> will enable emoji syntax, which is not the behavior you want. The escape character syntax is like this:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown">{?:}joy:
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p><strong>:joy:</strong> instead of <strong>😂</strong></p>
<div class="details admonition tip open">
        <div class="details-summary admonition-title">
            <i class="icon fas fa-lightbulb fa-fw"></i>Tip<i class="details-icon fas fa-angle-right fa-fw"></i>
        </div>
        <div class="details-content">
            <div class="admonition-content">This is related to <strong><a href="https://github.com/gohugoio/hugo/issues/4978" target="_blank" rel="noopener noreffer">an issue for Hugo</a></strong>, which has not been resolved.</div>
        </div>
    </div>
<p>Another example is:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown">[link{?]}(#escape-character)
</code></pre></td></tr></table>
</div>
</div><p>The rendered output looks like this:</p>
<p><strong>[link](#escape-character)</strong> instead of <strong><a href="#escape-character" rel="">link</a></strong>.</p></div><div class="post-footer" id="post-footer">
    <div class="post-info">
        <div class="post-info-line">
            <div class="post-info-mod">
                <span>Updated on 2020-03-05</span>
            </div>
            <div class="post-info-license"></div>
        </div>
        <div class="post-info-line">
            <div class="post-info-md"><span>
                            <a class="link-to-markdown" href="/en/theme-documentation-content/index.md" target="_blank">Read Markdown</a>
                        </span></div>
            <div class="post-info-share">
                <span></span>
            </div>
        </div>
    </div>

    <div class="post-info-more">
        <section class="post-tags"><i class="fas fa-tags fa-fw"></i>&nbsp;<a href="/en/tags/content/">content</a>,&nbsp;<a href="/en/tags/markdown/">Markdown</a></section>
        <section>
            <span><a href="javascript:void(0);" onclick="window.history.back();">Back</a></span>&nbsp;|&nbsp;<span><a href="/en/">Home</a></span>
        </section>
    </div>

    <div class="post-nav"><a href="/en/theme-documentation-extended-shortcodes/" class="prev" rel="prev" title="Theme Documentation - Extended Shortcodes"><i class="fas fa-angle-left fa-fw"></i>Theme Documentation - Extended Shortcodes</a>
            <a href="/en/theme-documentation-basics/" class="next" rel="next" title="Theme Documentation - Basics">Theme Documentation - Basics<i class="fas fa-angle-right fa-fw"></i></a></div>
</div>
<div id="comments"><div id="valine" class="comment"></div><noscript>
                Please enable JavaScript to view the comments powered by <a href="https://valine.js.org/">Valine</a>.
            </noscript></div></article></div>
            </main><footer class="footer">
        <div class="footer-container"><div class="footer-line">Powered by <a href="https://gohugo.io/" target="_blank" rel="noopener noreffer" title="Hugo 0.88.1">Hugo</a> | Theme - <a href="https://github.com/dillonzq/LoveIt" target="_blank" rel="noopener noreffer" title="LoveIt 0.2.10"><i class="far fa-kiss-wink-heart fa-fw"></i> LoveIt</a>
                </div><div class="footer-line"><i class="far fa-copyright fa-fw"></i><span itemprop="copyrightYear">2023</span><span class="author" itemprop="copyrightHolder">&nbsp;<a href="/en/" target="_blank">Lioyd Shaw</a></span>&nbsp;|&nbsp;<span class="license"><a rel="license external nofollow noopener noreffer" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">CC BY-NC 4.0</a></span></div>
        </div>
    </footer>
 


</div>

        <div id="fixed-buttons"><a href="#" id="back-to-top" class="fixed-button" title="Back to Top">
                <i class="fas fa-arrow-up fa-fw"></i>
            </a><a href="#" id="view-comments" class="fixed-button" title="View Comments">
                <i class="fas fa-comment fa-fw"></i>
            </a>
        </div><link rel="stylesheet" href="/lib/valine/valine.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/dist/css/lightgallery.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/copy-tex.min.css"><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/autocomplete.js@0.37.1/dist/autocomplete.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.2.0/dist/algoliasearch-lite.umd.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/dist/js/lightgallery.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lg-thumbnail.js@1.2.0/dist/lg-thumbnail.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lg-zoom.js@1.2.0/dist/lg-zoom.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/copy-tex.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/mhchem.min.js"></script><script type="text/javascript">window.config={"code":{"copyTitle":"Copy to clipboard","maxShownLines":10},"comment":{"valine":{"appId":"uefnzaEGhgPRfPDaRNWQ3MF4-MdYXbMMI","appKey":"4aOKu9jSOSSr2sL3DAec7Rkn","avatar":"robohash","el":"#valine","emojiCDN":"https://cdn.jsdelivr.net/npm/emoji-datasource-google@5.0.1/img/google/64/","emojiMaps":{"100":"1f4af.png","alien":"1f47d.png","anger":"1f4a2.png","angry":"1f620.png","anguished":"1f627.png","astonished":"1f632.png","black_heart":"1f5a4.png","blue_heart":"1f499.png","blush":"1f60a.png","bomb":"1f4a3.png","boom":"1f4a5.png","broken_heart":"1f494.png","brown_heart":"1f90e.png","clown_face":"1f921.png","cold_face":"1f976.png","cold_sweat":"1f630.png","confounded":"1f616.png","confused":"1f615.png","cry":"1f622.png","crying_cat_face":"1f63f.png","cupid":"1f498.png","dash":"1f4a8.png","disappointed":"1f61e.png","disappointed_relieved":"1f625.png","dizzy":"1f4ab.png","dizzy_face":"1f635.png","drooling_face":"1f924.png","exploding_head":"1f92f.png","expressionless":"1f611.png","face_vomiting":"1f92e.png","face_with_cowboy_hat":"1f920.png","face_with_hand_over_mouth":"1f92d.png","face_with_head_bandage":"1f915.png","face_with_monocle":"1f9d0.png","face_with_raised_eyebrow":"1f928.png","face_with_rolling_eyes":"1f644.png","face_with_symbols_on_mouth":"1f92c.png","face_with_thermometer":"1f912.png","fearful":"1f628.png","flushed":"1f633.png","frowning":"1f626.png","ghost":"1f47b.png","gift_heart":"1f49d.png","green_heart":"1f49a.png","grimacing":"1f62c.png","grin":"1f601.png","grinning":"1f600.png","hankey":"1f4a9.png","hear_no_evil":"1f649.png","heart":"2764-fe0f.png","heart_decoration":"1f49f.png","heart_eyes":"1f60d.png","heart_eyes_cat":"1f63b.png","heartbeat":"1f493.png","heartpulse":"1f497.png","heavy_heart_exclamation_mark_ornament":"2763-fe0f.png","hole":"1f573-fe0f.png","hot_face":"1f975.png","hugging_face":"1f917.png","hushed":"1f62f.png","imp":"1f47f.png","innocent":"1f607.png","japanese_goblin":"1f47a.png","japanese_ogre":"1f479.png","joy":"1f602.png","joy_cat":"1f639.png","kiss":"1f48b.png","kissing":"1f617.png","kissing_cat":"1f63d.png","kissing_closed_eyes":"1f61a.png","kissing_heart":"1f618.png","kissing_smiling_eyes":"1f619.png","laughing":"1f606.png","left_speech_bubble":"1f5e8-fe0f.png","love_letter":"1f48c.png","lying_face":"1f925.png","mask":"1f637.png","money_mouth_face":"1f911.png","nauseated_face":"1f922.png","nerd_face":"1f913.png","neutral_face":"1f610.png","no_mouth":"1f636.png","open_mouth":"1f62e.png","orange_heart":"1f9e1.png","partying_face":"1f973.png","pensive":"1f614.png","persevere":"1f623.png","pleading_face":"1f97a.png","pouting_cat":"1f63e.png","purple_heart":"1f49c.png","rage":"1f621.png","relaxed":"263a-fe0f.png","relieved":"1f60c.png","revolving_hearts":"1f49e.png","right_anger_bubble":"1f5ef-fe0f.png","robot_face":"1f916.png","rolling_on_the_floor_laughing":"1f923.png","scream":"1f631.png","scream_cat":"1f640.png","see_no_evil":"1f648.png","shushing_face":"1f92b.png","skull":"1f480.png","skull_and_crossbones":"2620-fe0f.png","sleeping":"1f634.png","sleepy":"1f62a.png","slightly_frowning_face":"1f641.png","slightly_smiling_face":"1f642.png","smile":"1f604.png","smile_cat":"1f638.png","smiley":"1f603.png","smiley_cat":"1f63a.png","smiling_face_with_3_hearts":"1f970.png","smiling_imp":"1f608.png","smirk":"1f60f.png","smirk_cat":"1f63c.png","sneezing_face":"1f927.png","sob":"1f62d.png","space_invader":"1f47e.png","sparkling_heart":"1f496.png","speak_no_evil":"1f64a.png","speech_balloon":"1f4ac.png","star-struck":"1f929.png","stuck_out_tongue":"1f61b.png","stuck_out_tongue_closed_eyes":"1f61d.png","stuck_out_tongue_winking_eye":"1f61c.png","sunglasses":"1f60e.png","sweat":"1f613.png","sweat_drops":"1f4a6.png","sweat_smile":"1f605.png","thinking_face":"1f914.png","thought_balloon":"1f4ad.png","tired_face":"1f62b.png","triumph":"1f624.png","two_hearts":"1f495.png","unamused":"1f612.png","upside_down_face":"1f643.png","weary":"1f629.png","white_frowning_face":"2639-fe0f.png","white_heart":"1f90d.png","wink":"1f609.png","woozy_face":"1f974.png","worried":"1f61f.png","yawning_face":"1f971.png","yellow_heart":"1f49b.png","yum":"1f60b.png","zany_face":"1f92a.png","zipper_mouth_face":"1f910.png","zzz":"1f4a4.png"},"enableQQ":true,"highlight":true,"lang":"en","pageSize":10,"placeholder":"留一个友善的评论吧","recordIP":true,"visitor":true}},"lightGallery":{"actualSize":false,"exThumbImage":"data-thumbnail","hideBarsDelay":2000,"selector":".lightgallery","speed":400,"thumbContHeight":80,"thumbWidth":80,"thumbnail":true},"math":{"delimiters":[{"display":true,"left":"$$","right":"$$"},{"display":true,"left":"\\[","right":"\\]"},{"display":false,"left":"$","right":"$"},{"display":false,"left":"\\(","right":"\\)"}],"strict":false},"search":{"algoliaAppID":"PASDMWALPK","algoliaIndex":"index.en","algoliaSearchKey":"b42948e51daaa93df92381c8e2ac0f93","highlightTag":"em","maxResultLength":10,"noResultsFound":"No results found","snippetLength":30,"type":"algolia"}};</script><script type="text/javascript" src="/js/theme.min.js"></script></body>
</html>
